<template>
  <div class="messagebulletin" style="width:98%;">
    <!-- 查询条件 -->
    <div class="messagebulletin-box" >
      <el-form :model="dataForm" ref="dataForm">
        <el-row  :gutter="20">
          <el-col :span="6">
            <el-form-item prop="messageTitle">
              <el-input v-model="dataForm.messageTitle" placeholder="请输入消息标题">
                <template slot="prepend">消息标题</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="messageSender">
              <el-input v-model="dataForm.messageSender" placeholder="请输入发送人">
                <template slot="prepend">发送人</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item prop="createDate">
              <div class="depart-date">
                <div class="slect-title">创建时间</div>
                <el-date-picker
                  style="width: 85%;"
                  v-model="dataForm.createDate"
                  type="daterange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="from-btns" style="margin-bottom: 5%;margin-top: 5%">
        <kt-button :label="$t('action.reset')" @click="resetForm('dataForm')" perms="true"   type="primary"  />
        <kt-button :label="$t('action.search')" @click="searchForm"  :loading="editLoading" perms="true"  type="primary"  />
      </div>
    </div>

    <kt-table permsEdit="sys:dict:edit"   permsDelete="sys:dict:delete" permsDistribution="11111" publicMessage
              :data="pageResult" :columns="columns" :columns2="columns2" @findPage="findPage" @handleCurrentChange="handleRoleSelectChange" >
    </kt-table>
    <!--消息详情弹窗-->
    <el-dialog title="消息详情" class="bigfontcont" width="50%" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <el-form :model="dataFormMessage" ref="dataFormMessage"  label-width="100px" >
        <el-form-item label="消息标题" prop="messageTitle" >
          <el-input style="width: 30%;float: left" v-model="dataFormMessage.messageTitle" :disabled="true">
          </el-input>
        </el-form-item>
        <el-form-item label="消息内容" prop="messageSender" :class="dataFormMessage.isSuccessFor==1?'bigfont':''">
          <!-- <el-input type="textarea" :rows="5"   v-model="dataFormMessage.messageContent" :disabled="true">
          </el-input> -->
          <div v-html='dataFormMessage.messageContent'></div>
        </el-form-item>
        <el-form-item :label="dataFormMessage.urlDescription" prop="url" v-if="dataFormMessage.url" >
          <el-button :size="size" @click.native="downLoad" style="float: left">{{'点击下载'}}</el-button>
        </el-form-item>
        <el-row>
          <el-col :span="6">
            <el-form-item label="发布时间" prop="sendDate" >
              <el-date-picker
                width="200"
                v-model="dataFormMessage.sendDate"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
                :disabled="true">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :size="size" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
  import CrmTreeInput from "@/components/CrmTreeInput";
  import PopupTreeInput from "@/components/PopupTreeInput";
  import KtButton from "@/views/Core/KtButton";
  import KtTable from "@/views/Core/KtTable";
  import axios from 'axios'
  import { baseUrl } from '@/utils/global'
  export default {
    name: "PublicMessage",
    components: {
      PopupTreeInput,
      KtButton,
      KtTable,
      CrmTreeInput
    },
    data() {
      return {
        value:"",
        size: "small",
        // filters: {
        //   name: ""
        // },
        columns: [
          { type: "index", label: "序号", minWidth: 50 },
          { prop: "messageTitle", label: "消息标题", minWidth: 150 }
        ],
        columns2: [
          { prop: "messageSender", label: "发送人", minWidth: 80 },
          { prop: "sendDate",  sortable:'true', label: "发布时间", minWidth: 100 },
        ],
        pageRequest: { pageNum: 1, pageSize: 8 },
        pageResult: {
          content:[],
          totalSize:""
        },
        dialogVisible: false, //详情弹窗
        editLoading: false,
        // 界面数据
        dataForm: {
          messageTitle:"",
          messageContent: "",
          messageSender: "",
          receptionType: "",
          createDate: "",
          messageStatus:"",
          receptionTypevalue:"",
          messageStatusvalue:""
        },
        dataFormMessage:{
          createDate: "",
          creater: 0,
          id: "",
          messageContent: "",
          isSuccessFor:'',
          messageSender: "",
          messageStatus: "",
          messageTitle: "",
          publishType: "",
          sendDate: ""
        },
        publishType:[],// 发布类型
      };
    },
    methods: {
      //获取下拉列表
      findDown: function () {
        this.$api.dropdown.publishType().then(res =>{
          this.publishType=res.keyValueList
        })
      },
      //表单重置
      resetForm(dataForm) {
        this.dataForm= {
          messageTitle:"",
          messageContent: "",
          messageSender: "",
          receptionType: "",
          createDate: "",
          messageStatus:"",
          receptionTypevalue:"",
          messageStatusvalue:""
        }
        this.data={}
        this.$refs[dataForm].resetFields();
        this.editLoading = false;
        this.findPage(null);
      },
      // 获取分页数据
      findPage: function(data) {
        if (data !== null) {
          this.pageRequest = data.pageRequest;
          this.pageRequest = Object.assign({},{searchType:2,messageStatus:1},this.pageRequest)
        }
        // this.pageRequest.columnFilters = {
        //   name: { name: "name", value: this.filters.name }
        // };
        this.$api.message.findPage({...this.pageRequest,...this.data}).then(res => {
          this.pageResult.content = res.systemMessageList;
          this.pageResult.totalSize = res.total;
        })
          .then(data != null ? data.callback : "");
      },
      //查询
      searchForm: function() {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
              this.data={
                messageTitle:this.dataForm.messageTitle,
                messageSender:this.dataForm.messageSender,
                createStartDate:this.dataForm.createDate[0],
                createStopDate:this.dataForm.createDate[1]
              }
              this.editLoading = true
              let params = Object.assign({}, this.data,this.pageRequest);
              this.$api.message.findPage(params).then(res => {
                this.editLoading = false;
                if (res.result == 1) {
                  this.pageResult.content=res.systemMessageList
                  this.pageResult.totalSize = res.total;
                  this.$message({ message: res.msg, type: "success" });
                  // this.$refs["dataForm"].resetFields();
                } else {
                  this.$message({
                    message: res.msg,
                    type: "error"
                  });
                }
                // this.findPage(null);
              });
          }
        });
      },
      // 消息选择改变监听
      handleRoleSelectChange(val) {
        if(val == null || val.val == null) {
          return
        }
        // console.log(val.val.messageContent)
        if(val.val.messageContent.indexOf('联系电话为')!=-1){
          val.val.isSuccessFor='1'//索要失败
        }
        
        this.$api.message.updateRead({messageId:val.val.id}).then( res => {
          val.val.isRead=1
          this.dialogVisible=true
            this.dataFormMessage=Object.assign({},val.val)
            for (let i=0;i<this.publishType.length; i++){
              if(this.dataFormMessage.publishType == this.publishType[i].key){
                this.value=this.publishType[i].value
              }
            }
          })
      },
      downLoad:function () {
        window.open(this.dataFormMessage.url)
      }
    },
    mounted() {
        this.findDown()
    }
  }
</script>

<style lang='scss' scoped>
  .messagebulletin-box {
    overflow: hidden;
    width: 98%;
    margin: 0 auto;
  }
  .depart-box {
    width: 25%;
    float: left;
    display: flex;
    flex-direction: row;
    .slect-title {
      width: 28%;
      padding: 0 5%;
      float: left;
    }
    .el-input {
      width: 90%;
    }
    .el-select {
      width: 50%;
    }
  }
  .slect-title {
    background-color: #f5f7fa;
    color: #909399;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    width: 90px;
    line-height: 37px;
    white-space: nowrap;
    font-size: 14px;
    display: inline-table;
    margin-right: -1%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-left: 2%;
  }
  .slect-title-no {
    margin-left: 1%;
  }
  .el-row {
    margin-top: 20px;
  }
  .slect-title {
    float: left;
  }
  .from-btns {
    clear: both;
    margin: 30px 0;
  }
  
  
</style>
<style lang="scss" scoped>
  .table-width .el-table_1_column_13 .cell {
    width: 100%;
  }
  .add-btns {
    display: flex;
    flex-direction: row;
    margin-bottom: 2%;
    margin-left: 1%;
  }
  .messagebulletin{
    .depart-date .slect-title {
      margin-left: 0.4%;
      width: 15%;
      color: #333;
    }
    .el-date-editor{
      margin-left: 0;
      float: left;
    }
  }
  .fr{
    float: right;
  }
  .add-btns {
    display: flex;
    flex-direction: row;
    margin-bottom: 2%;
    margin-left: 1%;
    float: left;
  }
</style>
<style lang="scss">
.bigfontcont{
  .bigfont{
    .el-textarea.is-disabled .el-textarea__inner{
      color: red;
      font-size: 30px;
    }
  }
}
</style>
